<template>
  <div class="app-container" v-loading="listLoading">

    <el-card class="box-card" style="margin-bottom: 10px">
      <!-- 内容 -->
      <div class="text" >
        <el-page-header @back="goBack" content="详情页面">
        </el-page-header>
      </div>
    </el-card>

    <!-- spu -->
    <el-card class="box-card" style="min-height: 40vh;margin-bottom: 30px">
      <div slot="header" class="clearfix">
        <!-- 头部左侧 -->
        <div class="media-display">
          <el-link :underline="false" style="font-size: 20px">产品SPU</el-link>
          <el-divider direction="vertical"></el-divider>
        </div>
      </div>
      <!-- 内容 -->
      <div class="spu" style="display: flex;">

        <div class="spu-img">
          <div style="width: 200px">
            <img v-if="spu.mainImg !== undefined" :src="prefix + spu.mainImg" style="width: 200px" alt="主图">
          </div>
          <el-link :underline="false">{{ spu.name }}</el-link>
        </div>

        <div class="spu-content">
          <div class="spu-content-left">
            <p>产品id: <el-link :underline="false">{{ spu.productId }}</el-link></p>
            <p>品牌id: <el-link :underline="false">{{ spu.brandId }}</el-link></p>
            <p>产品名称: <el-link :underline="false">{{ spu.name }}</el-link></p>
            <p>产品标题: <el-link :underline="false">{{ spu.title }}</el-link></p>
            <p>产品描述: <el-link :underline="false">{{ spu.describe }}</el-link></p>
          </div>
          <div class="spu-content-right">
            <p>产品详情: <el-link :underline="false">{{ spu.detail }}</el-link></p>

            <div>
              <el-link :underline="false" type="info">规格参数</el-link>

              <div v-for="(key, index) in Object.keys(attributeList)" :key="index">
                <p>
                  {{ key }} :
                  <el-link :underline="false" v-for="(item, index) in attributeList[key]" :key="index">{{ item }}
                    <el-divider direction="vertical" v-if="index + 1 < Object.keys(attributeList[key]).length"></el-divider>
                  </el-link>
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>
    </el-card>

    <!-- sku -->
    <el-card class="box-card" style="min-height: 60vh">
      <div slot="header" class="clearfix">
        <!-- 头部左侧 -->
        <div class="media-display">
          <el-link :underline="false" style="font-size: 20px">产品SKU</el-link>
          <el-divider direction="vertical"></el-divider>
        </div>

        <!-- 头部右侧 -->
        <div style="margin-left: auto">
        </div>
      </div>
      <!-- 内容 -->
      <div class="text">
        <el-table
          highlight-current-row
          :data="sku"
          style="width: 100%">
          <!-- 展开行 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="产品 ID">
                  <span>{{ props.row.productId }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="规格 ID">
                  <span>{{ props.row.specsId }}</span>
                </el-form-item>
                <el-form-item label="价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="库存">
                  <span>{{ props.row.specsStock }}</span>
                </el-form-item>
                <el-form-item label="商品属性">
                  <span>{{ props.row.productSpecs }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createTime | timestampToTime}}</span>
                </el-form-item>
                <el-form-item label="更新时间">
                  <span>{{ props.row.updateTime | timestampToTime}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="规格主图">
            <template slot-scope="scope">
              <img :src="prefix + scope.row.specsImg" alt="主图" width="100px"/>
            </template>
          </el-table-column>
          <el-table-column
            label="规格 ID"
            prop="specsId"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="规格"
            prop="productSpecs"
            show-overflow-tooltip>
            <template slot-scope="scope" >
                <span v-for="(key, index) in Object.keys(JSON.parse(scope.row.productSpecs))" :key="index">
                  {{ JSON.parse(scope.row.productSpecs)[key] }}
                </span>
            </template>
          </el-table-column>
          <el-table-column
            label="价格"
            prop="price">
          </el-table-column>
          <el-table-column
            label="库存"
            class-name="label-center"
            prop="specsStock">
            <template slot-scope="scope">
              <el-button @click="decrease(scope.$index,$event.target)" :disabled="scope.row.specsStock === 1" icon="el-icon-minus" size="medium" circle></el-button>
              <el-input v-model="scope.row.specsStock"
                        class="specsStock"
                        style="width: 80px;margin: 0 5px;"
                        size="medium"
                        :readonly="true">
              </el-input>
              <el-button @click="increase(scope.$index,$event.target)" icon="el-icon-plus" size="medium" circle></el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="状态(锁定/正常)">
            <template slot-scope="scope" >
              <el-popconfirm
                confirm-but ton-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="是否更改商品状态？"
                @onConfirm="modifySpecsState(scope.$index,scope.row.specsId,scope.row.state)">
                <el-switch
                  slot="reference"
                  disabled
                  v-model="scope.row.state"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </el-popconfirm>
            </template>
          </el-table-column>

<!--          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="getSpecsInfo(scope.row.productId)">详情</el-button>
              &lt;!&ndash;<el-button slot="reference" size="small" type="danger" @click="open()">删除</el-button>&ndash;&gt;
            </template>
          </el-table-column>-->
        </el-table>

      </div>
    </el-card>
  </div>
</template>

<script>
  import { getProductDetail, modifySpecsStockReq, modifySpecsStateReq } from '@/api/product'
  import settings from '@/settings'

  export default {
    name: "ProductDetail",
    data(){
      return{
        productId: '',
        listLoading: true,// 表格loading
        spu : {},// 商品spu
        sku : [],// 商品sku
        prefix : settings.prefix,// 全局前缀
        attributeList: '',// 解析后的spu规格属性
      }
    },
    methods : {
      goBack(){
        this.$router.push("/product/list")
      },
      open(){
        this.$confirm(`此操作将验证, 是否继续？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
      },

      decrease(index,event){// 减少数量
        modifySpecsStockReq({ specsId: this.sku[index].specsId, specsStock: this.sku[index].specsStock - 1 }).then(response => {
          console.log(response)
          if (response.state === true) {
            this.sku[index].specsStock -= 1
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
        this.eventBlur(event)
      },
      increase(index,event){// 增加数量
/*        console.log(this.sku[index].specsStock)
        console.log(this.sku[index].specsId)*/
        modifySpecsStockReq({ specsId: this.sku[index].specsId, specsStock: this.sku[index].specsStock + 1 }).then(response => {
          console.log(response)
          if (response.state === true) {
            this.sku[index].specsStock += 1
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
        this.eventBlur(event)
      },
      eventBlur(event){
        if(event.nodeName === 'SPAN' || event.nodeName === 'I'){event = event.parentNode;}event.blur();
      },

      init() {//初始化数据
        this.listLoading = true
        getProductDetail({ productId: this.productId }).then(response => {
          console.log(response)
          if (response.state === true) {
            this.listLoading = false
            console.log("内部")
            this.spu = response.data.spu
            this.sku = response.data.sku
            this.attributeList = JSON.parse(response.data.spu.attributeList)
            this.$notify.success({ title: '成功', message: response.message, duration: 1500 });
          } else {
            this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
          }
        })
      },
      modifySpecsState(index ,specsId, state){
        console.log(index, specsId)
        state = state ^ 1
        modifySpecsStateReq({specsId: specsId, state: state}).then(response =>{
          if (response.state === true) {
            this.sku[index].state = state
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      },

      handleClose(done) {
        this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});
      },
    },
    filters: {
      // 时间戳转换成时间
      timestampToTime (timestamp) {
        let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        let D = date.getDate() + ' '
        let h = date.getHours() + ':'
        let m = date.getMinutes() + ':'
        let s = date.getSeconds()
        s = s < 10 ? '0' + s : s;
        return Y+M+D+h+m+s;
      },
    },
    beforeMount() {//初始化数据
      this.productId = this.$route.params.productId
      this.init();
    },
    mounted(){
    },
  }
</script>

<style scoped>
  .spu-img{
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  >>>.label-center{
    text-align: center;
  }
  >>>.specsStock input{
    text-align: center;
  }

  .spu-content{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-grow: 1;
  }
  .spu-content-left{
    width: 50%;
  }

  .spu-content p,p > a{
    font-size: 20px;
    margin: 5px 0;
  }

  .clearfix{
    display: flex;
    align-items: center;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .demo-table-expand {
    font-size: 0;
  }
  >>> .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form--inline .el-form-item__content{
    vertical-align: baseline;
  }
  .el-switch__label{
    color: #909399;
  }

  /*重写switch的disabled时css*/
  >>>.el-switch.is-disabled{
    opacity: 1;
  }
  >>>.el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{
    cursor: pointer;
  }

  .switch-disabled{
    cursor: no-drop;
  }

</style>
